<!-- 分页组件 -->
<!--
目前仅支持以下后端接口返回数据结果
{
    data:{
        results:[]
    }
}
参数:
url         与后台交互的地址
param       传递的参数，并把其中当前页的参数去掉
pageNumKey  后台当前页参数的key，不传的话取默认值pageNum
使用方法:
<page :url="url" method="post" :param="params" pageNumKey="curPageNum">
    <template slot-scope="{datas}">
        <div>datas的值为data.results</div>
    </template>
</page>
-->
<template>
  <div>
    <scroller lock-x use-pullup use-pulldown
              :bounce="true"
              :pulldown-config="{  clsPrefix: 'xs-plugin-pulldown-',loadingContent:  '加载中...',downContent: '下拉刷新', upContent: '释放更新',height: 55}"
              :height="height"
              @on-pullup-loading="loadMore"
              @on-pulldown-loading="refresh"
              v-model="status"
              ref="scroller">
      <div>
        <div v-show="isNoData" class="aui-font-size-16 t-grey-999 aui-text-center"><img src="../../assets/images/zwjl.png" width="100%" /></div>
        <slot :datas="datas">

        </slot>
      </div>
      <!--pullup slot-->
      <div slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up"
           style="position: absolute; width: 100%; height: 45px; bottom: -40px; text-align: center;">
        <span v-show="status.pullupStatus === 'default'"></span>
        <span v-show="status.pullupStatus === 'loading'"><spinner type="ios-small"></spinner></span>
      </div>
    </scroller>
  </div>
</template>

<script>
    import {Scroller, Spinner, Group} from 'vux'

    export default {
        props: {
            height: {
                type: String,
                default: "-50"
            },
            url: {
                type: String,
                required: true
            },
            method: {
                type: String,
                default: 'get'
            },
            param: {
                type: Object,
                default: function () {
                    return {}
                }
            },
            pageNumKey:{
                type: String,
                default: 'pageNum'
            },
            // 加载完数据后的回调方法
            callback:{
                type:Function,
                default:function (){}
            },
            // 回调方法的参数
            callbackParams:{
                type:Object,
                default: function () {
                    return {}
                }
            }
        },
        data() {
            return {
                datas: [],
                paramVal: this.param,
                urlVal: this.url,
                isNoData: false,
                pageNum: 0,
                pullupEnabled: true,
                status: {
                    pullupStatus: 'default',
                    pulldownStatus: 'default'
                }
            }
        },
        components: {
            Scroller,
            Spinner,
            Group
        },
        methods: {
            loadMore() {
                this.pageNum++
                this.loadData(false)
            },
            refresh() {
                this.pageNum = 1
                this.loadData(true)
            },
            changePullupStatus(enabled) {
                if (enabled) {
                    this.$refs.scroller.enablePullup()
                    this.pullupEnabled = true
                } else {
                    this.$refs.scroller.disablePullup()
                    this.pullupEnabled = false
                }
            },
            loadData(refresh) {
                let pjson = '{"'+this.pageNumKey+'":"'+this.pageNum+'"}'
                let addParam = eval('(' + pjson + ')')
                let p = Object.assign(this.paramVal, addParam)
                if (this.urlVal == '') return
                if (this.method === 'get') {
                    this.$http.get(this.urlVal, {params: p}).then((response) => {
                        if(response.body.data!=null&&response.body.data.results!=null){
                            this.dealResult(refresh, response.body.data.results)
                        }else if(response.body.data!=null){
                            this.dealResult(refresh, response.body.data)
                        }else{
                            this.dealResult(refresh, [])
                        }
                        if (response.body.data == null) {
                            $.extend(this.callbackParams,{params:p,result:null})
                        }else{
                            $.extend(this.callbackParams,{params:p,result:response.body.data.results})
                        }
                        this.callback(this.callbackParams)
                    }, (response) => {
                    })
                } else {
                    this.$http.post(this.urlVal, p).then((response) => {
                        if(response.body.data!=null&&response.body.data.results!=null){
                            this.dealResult(refresh, response.body.data.results)
                        }else if(response.body.data!=null){
                            this.dealResult(refresh, response.body.data)
                        }else{
                            this.dealResult(refresh, [])
                        }
                        if (response.body.data == null) {
                            $.extend(this.callbackParams,{params:p,result:null})
                        }else{
                            $.extend(this.callbackParams,{params:p,result:response.body.data.results})
                        }
                        this.callback(this.callbackParams)
                    }, (response) => {
                    })
                }
            },
            dealResult(refresh, data) {
                if (refresh) {
                    this.datas = data
                    if (this.datas.length == 0) {
                        this.isNoData = true
                        this.changePullupStatus(false) //没有数据时禁用上拉加载更多
                    } else {
                        this.isNoData = false
                        this.changePullupStatus(true) //开启上拉加载更多
                    }
                    this.$nextTick(() => {
                        setTimeout(() => {
                            this.$refs.scroller.donePulldown()
                            this.$refs.scroller.reset({top: 0}, 0, 0)
                            this.pullupEnabled && this.$refs.scroller.enablePullup()
                        }, 10)
                    })
                } else {
                    if (data.length == 0) {
                        //没有更多数据
                        this.changePullupStatus(false)//禁用上拉加载更多
                        this.$store.commit('showToast', '没有更多数据')
                    }
                    this.datas = [...this.datas, ...data]
                    if (this.datas.length == 0) {
                        this.isNoData = true
                    } else {
                        this.isNoData = false
                    }
                    setTimeout(() => {
                        this.$refs.scroller.donePullup()
                    }, 10)
                }
            }
        },
        created: function () {
            this.refresh()
        }
    }
</script>

<style scoped>

</style>
